<template>
  <div class="app-container">
    <div class="filter-container">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>告警联系人</span>
          <el-button
            style="float: right;"
            type="primary"
            icon="el-icon-edit"
            @click="handleCreate()"
          >新增告警联系人
          </el-button>
        </div>
        <div style="">
          <el-table
            :key="key"
            :data="tableData1"
            border
            fit
            highlight-current-row
            style="width: 100%;margin-top:11px"
          >
            <el-table-column
              label="序号"
              prop="id"
              align="center"
              width="50"
            >
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <!--<el-table-column-->
            <!--prop="id"-->
            <!--label="ID"-->
            <!--align="center"-->
            <!--width=""-->
            <!--/>-->

            <el-table-column
              prop="name"
              label="姓名"
              align="center"
              width=""
            />
            <el-table-column
              prop="phone"
              label="电话"
              align="center"
              width=""
            />
            <el-table-column
              label="类型"
              min-width="70"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.type | typeFilter }}
              </template>
            </el-table-column>
            <el-table-column
              prop="created"
              label="创建时间"
              width=""
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="170px"
              class-name="small-padding fixed-width"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  @click="del(scope.row)"
                >删除
                </el-button>

              </template>
            </el-table-column>

          </el-table>

        </div>
      </el-card>

    </div>

    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>告警发送记录</span>
      </div>
      <div>
        <div class="filter-container">

          <el-date-picker
            v-model="listQuery.startDay"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择开始日期时间"
            style="width: 200px;"
            class="filter-item"
            clearable
            @keyup.enter.native="handleFilter"
          />
          <el-date-picker
            v-model="listQuery.endDay"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择结束日期时间"
            style="width: 200px;"
            class="filter-item"
            clearable
            @keyup.enter.native="handleFilter"
          />
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
        </div>
        <el-table
          :key="key"
          :data="tableData2"
          border
          fit
          highlight-current-row
          style="width: 100%;margin-top:11px"
        >
          <el-table-column
            label="序号"
            prop="id"
            align="center"
            width="50"
          >
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <!--<el-table-column-->
          <!--prop="id"-->
          <!--label="ID"-->
          <!--align="center"-->
          <!--width=""-->
          <!--/>-->
          <!--<el-table-column-->
          <!--prop="name"-->
          <!--label="姓名"-->
          <!--align="center"-->
          <!--width=""-->
          <!--/>-->
          <!--<el-table-column-->
          <!--prop="phone"-->
          <!--label="电话"-->
          <!--align="center"-->
          <!--width=""-->
          <!--/>-->
          <el-table-column
            label="类型"
            min-width="70"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.type | typeFilter }}
            </template>
          </el-table-column>
          <el-table-column
            prop="created"
            label="创建时间"
            width=""
            align="center"
          >
          </el-table-column>

        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList"
        />
      </div>
    </el-card>

    <!-- <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    /> -->

    <el-dialog
      title="新增"
      :visible.sync="dialogFormVisible"
      top="2vh"
      width="450px"
    >
      <el-form
        ref="temp"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="80px"
        style="width: 300px; margin-left:50px;"
      >
        <el-form-item
          label="姓名"
          prop="name"
        >
          <el-input v-model="temp.name"/>
        </el-form-item>
        <el-form-item
          label="电话"
          prop="phone"
        >
          <el-input v-model="temp.phone"/>
        </el-form-item>

        <el-form-item
          label="类型"
          prop="type"
        >
          <el-select
            v-model="temp.type"
            class="filter-item"
            style="width:220px"
          >
            <el-option
              v-for="item in TypeOptions"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          type="primary"
          @click="dialogStatus==='create'?createData():updateData()"
        >
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  const defaultFormThead = ["apple", "banana"];
  import {getManyList, alarmList, alarmAdd, alarmSendList,alarmdel} from "@/api/v1";
  import waves from "@/directive/waves"; // Waves directive
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
  import {parseTime} from "@/utils";
  import { MessageBox, Message } from 'element-ui'
  export default {
    directives: {waves},
    components: {Pagination},
    filters: {
      typeFilter(type) {
        if (type == 1) {
          return "浦发接口异常告警";
        } else if (type == 2) {
          return "浦发账户余额告警";
        } else {
          return "";
        }
      }
    },
    data() {
      return {
        tableData1: [],
        tableData2: [],
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        cooperation: [],
        listQuery: {
          page: 1,
          limit: 20,
          sort: "+id",
          phone: "",
          startDay: "",
          endDay: ""
        },
        key: 1, // table key
        formTheadOptions: ["apple", "banana", "orange"],
        checkboxVal: defaultFormThead, // checkboxVal
        formThead: defaultFormThead, // 默认表头 Default header
        dialogFormVisible: false,
        temp: {
          name: "",
          phone: "",
          type: ""
        },
        TypeOptions: [
          {id: 1, value: "调用浦发接口异常"},
          {id: 2, value: "浦发账户余额不足"}
        ],
        rules: {
          name: [{required: true, message: "请输入姓名", trigger: "blur"}],
          phone: [{required: true, message: "请输入电话", trigger: "blur"}],
          type: [{required: true, message: "请选择类型", trigger: "change"}]
        }
      };
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        );
        this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },
    created() {
      const id = this.$route.query.id;
      this.listQuery.cooperation = id;
      console.log(id);
      this.getList();
    },
    methods: {
      resetTemp() {
        this.temp.name = "";
        this.temp.phone = "";
        this.temp.type = "";
      },

      handleCreate() {
        this.resetTemp();
        console.log(this.temp);
        this.dialogStatus = "create";
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs["temp"].clearValidate();
        });
      },
      createData() {
        this.$refs["temp"].validate(valid => {
          if (valid) {
            console.log(this.temp);
            alarmAdd(this.temp).then(res => {
              // this.list.unshift(this.temp);
              this.dialogFormVisible = false;
              this.$notify({
                title: "成功",
                message: res.msg,
                type: "success",
                duration: 2000
              });
              this.getList();
            });
          }
        });
      },
      getList() {
        this.listLoading = true;
        alarmList(this.listQuery).then(res => {
          this.tableData1 = res.data;
          // this.total = Number(res.data.data.total);
          // Just to simulate the time of the request
        });
        alarmSendList(this.listQuery).then(res => {
          this.tableData2 = res.data.records
          this.total = Number(res.data.total)
          // Just to simulate the time of the request
        });
      },
      del(row) {
        this.$confirm('此操作将删除该信息吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            alarmdel({'id': row.id}).then(res => {
              Message({
                message: res.msg || 'success',
                type: 'success',
                duration: 2 * 1000
              })
              alarmList(this.listQuery).then(res => {
                this.tableData1 = res.data;
                // this.total = Number(res.data.data.total);
                // Just to simulate the time of the request
              });
            })
          })
          .catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // });
          })
      },

      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      }
    }
  };
</script>

